<template>
  <div class="user_info">
    <!-- 顶部 -->
    <van-nav-bar title="个人中心">
      <span slot="left" @click="$router.go(-1)">
        <i slot="icon" class="iconfont icon-zhiyuanfanhui17"></i>
      </span>
    </van-nav-bar>
    <!-- 内容部分 -->
    <div class="content">
      <ul>
        <li class="list">
          <span class="li_left">
            <van-icon name="contact" class="head"/>
            <div class="username">itcast <div>绑定手机:13012345678</div></div>
          </span>
          <van-icon name="arrow" />
        </li>
        <li class="list">
          <span class="li_left">
            <div class="username">账号与安全</div>
          </span>
          <van-icon name="arrow" />
        </li>
        <li class="list">
          <span class="li_left">
            <div class="username">我的购物车</div>
          </span>
          <van-icon name="arrow" />
        </li>
        <li class="list">
          <span class="li_left">
            <div class="username">收货地址管理</div>
          </span>
          <van-icon name="arrow" />
        </li>
      </ul>
      <van-button class="logout" size="large" @click="logOut">退出登录</van-button>
    </div>

    <!-- 底部标签页 -->
    <van-tabbar v-model="active" active-color="#ff8c00">
      <van-tabbar-item icon="home-o" @click="jumpToHome">首页</van-tabbar-item>
      <van-tabbar-item>
        <i slot="icon" class="iconfont icon-caidan1" @click="jumpToCate"></i>分类
      </van-tabbar-item>
      <van-tabbar-item>
        <i slot="icon" class="iconfont icon-ai-cart"></i>购物车
      </van-tabbar-item>
      <van-tabbar-item>
        <i slot="icon" class="iconfont icon-huiyuan21"></i>会员中心
      </van-tabbar-item>
    </van-tabbar>

  </div>
</template>

<script>
import { logout } from '@/api'
export default {
  data () {
    return {
      active: 3
    }
  },
  methods: {
    logOut () {
      logout()
        .then(res => {
          console.log(res)
          if (res.data.success) {
            localStorage.setItem('userInfo', '')
            this.$router.push({ name: 'login' })
          }
        })
    },
    jumpToCate () {
      this.$router.push({ name: 'category' })
    },
    jumpToHome () {
      this.$router.push({ name: 'home' })
    }
  }
}
</script>

<style lang="scss" scoped>
.user_info{
  .van-nav-bar {
        background-color: #006699;
        .van-nav-bar__title {
          color: #fff;
          font-size: 17px;
          font-weight: blod;
        }
        .icon-zhiyuanfanhui17 {
          color: #fff;
          font-size: 17px;
        }
  }
  .content{
    padding: 10px;
    .list{
      display: flex;
      justify-content: space-between;
      padding: 10px;
      border-bottom: 1px solid #ccc;
      .head{
        font-size: 40px;
        margin-right: 10px;
      }
      .li_left{
        display: flex
      }
    }
    .logout{
      height: 40px;
      line-height: 40px;
      margin-top: 30px;
      border: 1px solid #ccc;
    }
  }
  //底部标签页
  .van-hairline--top-bottom {
    background-color: #006699;
    .van-tabbar-item {
      color: #fff;
    }
  }
}
</style>
